<template>
    <div>
        <Row class="formRow">
          <Col span="2" class="rightRow">
            <span class="ModelInputTitle" style="width: 100%;text-align: right">检验中心编号</span>
          </Col>
          <Col span="2" class="leftRow">
            <Input v-model="formInline.testcenterCd" placeholder="检验中心编号" clearable style="width: 100%" size="large"></Input>
          </Col>
          <Col span="2" class="rightRow">
            <span class="ModelInputTitle" style="width: 100%;text-align: right">检验中心名称</span>
          </Col>
          <Col span="3" class="leftRow">
            <Input v-model="formInline.testcenterName" placeholder="检验中心名称" clearable style="width: 100%" size="large"></Input>
          </Col>
          <Col span="2" class="rightRow">
            <span class="ModelInputTitle" style="width: 100%;text-align: right">详细地址</span>
          </Col>
          <Col span="4" class="leftRow">
            <Input v-model="formInline.dtlAddress" placeholder="详细地址" clearable style="width: 100%" size="large"></Input>
          </Col>
          <Col span="2" class="rightRow">
            <span class="ModelInputTitle" style="width: 100%;text-align: right">是否有效</span>
          </Col>
          <Col span="2" class="leftRow">
            <Select  size="large" style="width:100%" v-model="formInline.valid">
              <Option  value="1" >是</Option>
              <Option  value="0" >否</Option>
            </Select>
          </Col>
          <Col span="4" class="leftRow">
            <Button type="primary" @click="onSubmit">查询</Button>
            <Button type="primary" @click="resetForm">重置</Button>
            <Button type="primary" @click="onAdd">添加</Button>
          </Col>
        </Row>

      <Table :data="tableData" :columns="cloums" stripe :loading="loading"  style="margin-top: 20px"></Table>
      <div style="margin: 10px;overflow: hidden">
        <div style="float: right;">
          <Page :total="total" :current="1" :placement="placement" @on-change="changePage" show-total show-elevator show-sizer @on-page-size-change="changeSize"></Page>
        </div>
      </div>

      <Modal
        v-model="add"
        title="添加"
        @on-ok="addOk"
        @on-cancel="cancel('您取消了操作')" width="600">
        <Row>
          <Col span="12"> <span class="ModelInputTitle"><Icon type="ios-medical" color="red"></Icon>检测中心名称</span><Input v-model="addForm.testcenterName" type="textarea" style="width: 200px" ></Input></Col>
          <Col span="12"> <span class="ModelInputTitle"><Icon type="ios-medical" color="red"></Icon>省</span>
          <Select  size="large" style="width:200px" v-model="addForm.provinceCd" @on-change="pChange">
            <Option v-for="p in provinceArr"  :value="p.regionCode" :key="p.id">{{p.regionName}}</Option>
          </Select>
          </Col>
        </Row>
        <Row style="margin-top: 20px">
          <Col span="12"> <span class="ModelInputTitle"><Icon type="ios-medical" color="red"></Icon>市</span>
          <Select  size="large" style="width:200px" v-model="addForm.cityCd" @on-change="sChange">
            <Option v-for="s in regionList"  :value="s.regionCode" :key="s.id">{{s.regionName}}</Option>
          </Select>
          </Col>
          <Col span="12"> <span class="ModelInputTitle"><Icon type="ios-medical" color="red"></Icon>区</span>
          <Select  size="large" style="width:200px" v-model="addForm.areaCd">
            <Option v-for="q in area"  :value="q.regionCode" :key="q.id">{{q.regionName}}</Option>
          </Select>
          </Col>
        </Row>

        <Row style="margin-top: 20px">
          <Col span="24">   <span class="ModelInputTitle"><Icon type="ios-medical" color="red"></Icon>详细地址</span><Input v-model="addForm.dtlAddress" type="textarea" :autosize="{minRows: 5,maxRows: 20}"  style="width: 485px"></Input></Col>
        </Row>
        <Row style="margin-top: 20px">
          <Col span="24">   <span class="ModelInputTitle">接口地址</span><Input v-model="addForm.itfAddress" type="textarea" :autosize="{minRows: 5,maxRows: 20}"  style="width: 485px"></Input></Col>
        </Row>

        <Row style="margin-top: 20px">
          <Col span="12"> <span class="ModelInputTitle">接口协议</span><Input v-model="addForm.itfProtocol"  style="width: 200px" ></Input></Col>
          <Col span="12"> <span class="ModelInputTitle">接口账号</span><Input v-model="addForm.itfNo" style="width: 200px" ></Input></Col>
        </Row>
        <Row style="margin-top: 20px">
          <Col span="12"> <span class="ModelInputTitle">接口密码</span><Input v-model="addForm.itfPassword" style="width: 200px" ></Input></Col>
          <Col span="12"> <span class="ModelInputTitle">回传方式</span>
            <Select  size="large" style="width:200px" v-model="addForm.reportDelivery">
              <Option v-for="r in reportDelivery"  :value="r.dataCode" :key="r.id">{{r.dataName}}</Option>
            </Select>
          </Col>
        </Row>
        </Modal>
        <Modal
          v-model="edit"
          title="编辑"
          @on-ok="editOk"
          @on-cancel="cancel('您取消了操作')" width="600">
          <Row>
            <Col span="12"> <span class="ModelInputTitle"><Icon type="ios-medical" color="red"></Icon>检测中心名称</span><Input v-model="editForm.testcenterName" type="textarea" style="width: 200px" ></Input></Col>
            <Col span="12"> <span class="ModelInputTitle"><Icon type="ios-medical" color="red"></Icon>省</span>
            <Select  size="large" style="width:200px" v-model="editForm.provinceCd" @on-change="pChange">
              <Option v-for="p in provinceArr"  :value="p.regionCode" :key="p.id">{{p.regionName}}</Option>
            </Select>
            </Col>
          </Row>
          <Row style="margin-top: 20px">
            <Col span="12"> <span class="ModelInputTitle"><Icon type="ios-medical" color="red"></Icon>市</span>
            <Select  size="large" style="width:200px" v-model="editForm.cityCd" @on-change="sChange">
              <Option v-for="s in regionList"  :value="s.regionCode" :key="s.id">{{s.regionName}}</Option>
            </Select>
            </Col>
            <Col span="12"> <span class="ModelInputTitle"><Icon type="ios-medical" color="red"></Icon>区</span>
            <Select  size="large" style="width:200px" v-model="editForm.areaCd">
              <Option v-for="q in area"  :value="q.regionCode" :key="q.id">{{q.regionName}}</Option>
            </Select>
            </Col>
          </Row>

          <Row style="margin-top: 20px">
            <Col span="24">   <span class="ModelInputTitle"><Icon type="ios-medical" color="red"></Icon>详细地址</span><Input v-model="editForm.dtlAddress" type="textarea" :autosize="{minRows: 5,maxRows: 20}"  style="width: 485px"></Input></Col>
          </Row>
          <Row style="margin-top: 20px">
            <Col span="24">   <span class="ModelInputTitle">接口地址</span><Input v-model="editForm.itfAddress" type="textarea" :autosize="{minRows: 5,maxRows: 20}"  style="width: 485px"></Input></Col>
          </Row>

          <Row style="margin-top: 20px">
            <Col span="12"> <span class="ModelInputTitle">接口协议</span><Input v-model="editForm.itfProtocol"  style="width: 200px" ></Input></Col>
            <Col span="12"> <span class="ModelInputTitle">接口账号</span><Input v-model="editForm.itfNo" style="width: 200px" ></Input></Col>
          </Row>
          <Row style="margin-top: 20px">
            <Col span="12"> <span class="ModelInputTitle">接口密码</span><Input v-model="editForm.itfPassword" style="width: 200px" ></Input></Col>
            <Col span="12"> <span class="ModelInputTitle">回传方式</span>
            <Select  size="large" style="width:200px" v-model="editForm.reportDelivery">
              <Option v-for="r in reportDelivery"  :value="r.dataCode" :key="r.id">{{r.dataName}}</Option>
            </Select>
            </Col>
          </Row>
          <Row style="margin-top: 20px">
            <Col span="12"> <span class="ModelInputTitle">是否有效</span>
            <Select  size="large" style="width:200px" v-model="editForm.valid">
              <Option value="1">是</Option>
              <Option value="0">否</Option>
            </Select>
            </Col>
          </Row>
      </Modal>
    </div>
</template>
<script type="text/ecmascript-6">
  import axios from  "axios";
    export default {
        data() {
            return {
              formInline:{
                testcenterCd:"",
                testcenterName:"",
                dtlAddress:"",
                valid:""
              },
              page:1,
              pageSize:10,
              placement:"bottom",
              total:0,
              loading:true,
              add:false,
              addForm:{
                testcenterName:"",
                provinceCd:"",
                cityCd:"",
                areaCd:"",
                dtlAddress:"",
                itfAddress:"",
                itfProtocol:"",
                itfNo:"",
                itfPassword:"",
                reportDelivery:""
              },
              edit:false,
              editForm:{
                testcenterName:"",
                provinceCd:"",
                cityCd:"",
                areaCd:"",
                dtlAddress:"",
                itfAddress:"",
                itfProtocol:"",
                itfNo:"",
                itfPassword:"",
                reportDelivery:"",
                valid:"",
                id:""
              },
              tableData:[],
              cloums:[
                {
                  title: '检验中心编号',
                  key: 'testcenterCd',
                  width:120,
                  align:"center"
                },
                {
                  title: '检验中心名称',
                  key: 'testcenterName',
                  width:180,
                  align:"center"
                },
                {
                  title: '省',
                  key: 'provinceName',
                  width:80,
                  align:"center"
                },
                {
                  title: '市',
                  key: 'cityName',
                  width:80,
                  align:"center"
                },
                {
                  title: '区',
                  key: 'areaName',
                  width:80,
                  align:"center"
                },
                {
                  title: '详细地址',
                  key: 'dtlAddress',
                  width:300,
                  align:"center"
                },
                {
                  title: '接口地址',
                  key: 'itfAddress',
                  width:120,
                  align:"center"
                },
                {
                  title: '接口协议',
                  key: 'itfProtocol',
                  width:120,
                  align:"center"
                },
                {
                  title: '接口账号',
                  key: 'itfNo',
                  width:120,
                  align:"center"
                },
                {
                  title: '接口密码',
                  key: 'itfPassword',
                  width:120,
                  align:"center"
                },
                {
                  title: '回传方式',
                  key: 'reportDelivery',
                  width:100,
                  align:"center"
                },
                {
                  title: '是否有效',
                  key: 'valid',
                  width:100,
                  align:"center"
                },
                {
                  title: '创建人',
                  key: 'creator',
                  width:80,
                  align:"center"
                },
                {
                  title: '修改人',
                  key: 'updater',
                  width:80,
                  align:"center"
                },
                {
                  title: '操作',
                  width:80,
                  align:"center",
                  fixed:"right",
                  render:(h,params)=>{
                    return h("div",[
                      h("Button",{
                        props:{
                          type:"primary",
                          size:"small"
                        },
                        on:{
                          click:()=>{
                              console.log(params.row)
                            var qs = require("qs");


                              this.editForm.testcenterName = params.row.testcenterName;
                              this.editForm.provinceCd = params.row.provinceCd;
                            var param = qs.stringify({
                              regionCode: params.row.provinceCd
                            });
                            axios.post("/common/regionListByRegionCode",param).then((res)=>{
                              if(res.data.code == "000000"){
                                this.regionList = res.data.data;
                              }else{
                                this.$Notice.error({title:res.data.msg});
                              }
                            });
                              this.editForm.cityCd = params.row.cityCd;
                            var param1 = qs.stringify({
                              regionCode: params.row.cityCd
                            });
                            axios.post("/common/regionListByRegionCode",param1).then((res)=>{
                              if(res.data.code == "000000"){
                                this.area = res.data.data;
                              }else{
                                this.$Notice.error({title:res.data.msg});
                              }
                            });
                              this.editForm.areaCd = params.row.areaCd;
                              this.editForm.dtlAddress = params.row.dtlAddress;
                              this.editForm.itfAddress = params.row.itfAddress;
                              this.editForm.itfProtocol = params.row.itfProtocol;
                              this.editForm.itfNo = params.row.itfNo;
                              this.editForm.itfPassword = params.row.itfPassword;
                              for(var i=0;i<this.reportDelivery.length;i++){
                                if(params.row.reportDelivery == this.reportDelivery[i].dataName){
                                  this.editForm.reportDelivery = this.reportDelivery[i].dataCode;
                                }
                              }
                              this.editForm.valid = params.row.valid=="是"?"1":"0";
                              this.editForm.id = params.row.id;
                              this.edit = true;
                          }
                        }
                      },"编辑")
                    ])
                  }
                },
              ],
              provinceArr:[],//省份列表
              regionList:[],//市
              area:[],//区
              reportDelivery:[],//接口回传方式
            }
        },
      mounted(){
          this.getprovince();
          this.init();
      },
      methods:{
        getprovince(){
          axios.post("/common/provinceList").then((res)=>{
            if(res.data.code=="000000"){
              this.provinceArr = res.data.data;
            }else{
              this.$Notice.error({title:res.data.msg});
            }
          })
          var qs = require("qs");
          var param = qs.stringify({
            dictType:"report_delivery"
          })
          axios.post("/common/dictDataList",param).then((res)=>{
            if(res.data.code=="000000"){
              this.reportDelivery = res.data.data;
            }else{
              this.$Notice.error({title:res.data.msg});
            }
          })
        },
        init(){
          var qs = require("qs");
          var param = qs.stringify({
            page:this.page,
            pageSize:this.pageSize,
            testcenterCd:this.formInline.testcenterCd,
            testcenterName:this.formInline.testcenterName,
            dtlAddress:this.formInline.dtlAddress,
            valid:this.formInline.valid
          });
          axios.defaults.headers.common['Authorization'] = sessionStorage.getItem("token");
          axios.post("/testCenter/queryBusTestcenterListByPage",param).then((res)=>{
              if(res.data.code =="000000"){
                this.loading = false;
                this.total = res.data.count;
                for(var i=0;i<res.data.data.length;i++){
                  res.data.data[i].valid = res.data.data[i].valid=="1"?"是":"否";
                  for(var j = 0;j<this.reportDelivery.length;j++){
                    if(res.data.data[i].reportDelivery == this.reportDelivery[j].dataCode){
                      res.data.data[i].reportDelivery = this.reportDelivery[j].dataName;
                    }
                  }
                }
                this.tableData = res.data.data;
              }else{
                this.$Notice.error({title:res.data.msg});
              }
          });
        },
        onSubmit(){
            this.init();
        },
        resetForm(){
          this.formInline.testcenterCd = "";
          this.formInline.testcenterName = "";
          this.formInline.dtlAddress = "";
          this.formInline.valid = "";
        },
        onAdd(){
          this.add = true;
        },
        changePage(page){
          this.page = page;
          this.loading = true;
          this.init();
        },
        changeSize(size){
          this.placement = size>=20?"top":"bottom";
          this.pageSize = size;
          this.loading = true;
          this.init();
        },
        cancel (msg) {
          this.$Notice.info({title:msg});
        },
        //省
        pChange(p){
          console.log(p)
            if(p){
              var qs = require("qs");
              var param = qs.stringify({
                regionCode:p
              })
              axios.post("/common/regionListByRegionCode",param).then((res)=>{
                if(res.data.code == "000000"){
                  this.regionList = res.data.data;
                }else{
                  this.$Notice.error({title:res.data.msg});
                }
              });
            }
        },
        //市
        sChange(s){
          if(s){
            var qs = require("qs");
            var param = qs.stringify({
              regionCode:s
            })
            axios.post("/common/regionListByRegionCode",param).then((res)=>{
              if(res.data.code == "000000"){
                this.area = res.data.data;
              }else{
                this.$Notice.error({title:res.data.msg});
              }
            });
          }
        },
        addOk(){
          var qs = require("qs");
          var param = qs.stringify({
            testcenterName:this.addForm.testcenterName,
            provinceCd:this.addForm.provinceCd,
            cityCd:this.addForm.cityCd,
            areaCd:this.addForm.areaCd,
            dtlAddress:this.addForm.dtlAddress,
            itfAddress:this.addForm.itfAddress,
            itfProtocol:this.addForm.itfProtocol,
            itfNo:this.addForm.itfNo,
            itfPassword:this.addForm.itfPassword,
            reportDelivery:this.addForm.reportDelivery
          })
          axios.post("/testCenter/addTestcenter",param).then((res)=>{
            if(res.data.code =="000000"){
              this.$Notice.success({title:"添加成功"});
              this.init();
            }else{
              this.$Notice.error({title:res.data.msg});
            }
          })
        },
        editOk(){
          var qs = require("qs");
          var param = qs.stringify({
            testcenterName:this.editForm.testcenterName,
            provinceCd:this.editForm.provinceCd,
            cityCd:this.editForm.cityCd,
            areaCd:this.editForm.areaCd,
            dtlAddress:this.editForm.dtlAddress,
            itfAddress:this.editForm.itfAddress,
            itfProtocol:this.editForm.itfProtocol,
            itfNo:this.editForm.itfNo,
            itfPassword:this.editForm.itfPassword,
            reportDelivery:this.editForm.reportDelivery,
            valid:this.editForm.valid,
            id:this.editForm.id
          })
          axios.post("/testCenter/updateTestcenter",param).then((res)=>{
            if(res.data.code =="000000"){
              this.$Notice.success({title:"更新成功"});
              this.init();
            }else{
              this.$Notice.error({title:res.data.msg});
            }
          })
        }
      }
    }
</script>
